import React from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../actions'

let AddTodo = ({ dispatch }) => {
    let input;
    return (
        <div>
            <form 
                onSubmit={e => {
                    e.preventDefault();
                    if (!input.value.trim()) { return; }
                    dispatch(addTodo(input.value));
                    input.value = '';
                }}
            >
                <input 
                    ref={node => {
                        input = node;
                    }}
                />
                <button type="submit">Add Todo</button>
            </form>
        </div>
    );
}

AddTodo = connect()(AddTodo)

export default AddTodo
